<script setup>
import HospitalList from "./hospitalList.vue";
import VehicleList from "./vehicleList.vue";
import DriverList from "./driverList.vue";
import CameraList from "./cameraList.vue";
import AlarmList from "./alarmList.vue";
import packageList from "./packageList.vue";
import cityList from "./cityList.vue";

import { ref, reactive, getCurrentInstance, onMounted, watch, markRaw } from "vue";

const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties; //vue3获取当前this

// 生命周期
onMounted(() => {
});

const tabsActive = ref(0);
// const componentTabs = ref(HospitalList);     // markRaw(HospitalList),
const componentTabs = reactive([ markRaw(VehicleList), markRaw(CameraList), markRaw(DriverList), markRaw(AlarmList), markRaw(packageList)]);

const tabsList = reactive([
  // { label: "Organization List", value: 0},
  { label: "Vehicle List", value: 0 },
  { label: "Camera List", value: 1 },
  { label: "Driver List", value: 2 },
  { label: "Alarm List", value: 3 },
  { label: "OTA Package List", value: 4 },
  // { label: "City List", value: 6, component: cityList },
]);

function tabsClick(item) {
  tabsActive.value = item.value;
};

</script>
<template>
  <div class="tabs_page">
    <div class="tabs_item" :class="tabsActive == item.value ? 'tabs_active' : ''" v-for="item in tabsList" :key="item.value" @click="tabsClick(item)">
      {{ item.label }}
    </div>
  </div>
  <component :is="componentTabs[tabsActive]"></component>
</template>
<style scoped lang="less">
.tabs_page {
  width: 100%;
  height: 50px;
  line-height: 60px;
  background-color: var(--mw-page-background-color);
  padding: 0 20px;
  display: flex;

  .tabs_item {
    margin-right: 50px;
    cursor: pointer;
    user-select: none;
    font-size: 16px;
  }

  .tabs_active {
    color: var(--mw-tabs-menu-active-color);
    border-bottom: 2px solid var(--mw-tabs-menu-active-color);
  }
}
</style>